<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>竞对信息</title>
	<meta http-equiv="Content-type" content="textml; charset=utf-8" />
	<meta content="telephone=no" name="format-detection" />
	<meta name="x5-orientation" content="portrait">
	<meta name="screen-orientation" content="portrait">
	<meta name="viewport"
		content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=yes">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="icon" href="data:;base64,=">
	<link rel="stylesheet" type="text/css" href="//img.ejiayou.com/activity/pages/ejiayoupay/ejiayou/css/reset.css" />
	<link rel="stylesheet" href="css/index.css" />
	<link rel="stylesheet" type="text/css" href="css/index_style.css" />
	<link rel="stylesheet" type="text/css" href="css/race_info.css" />
	<style type="text/css">
		.station_info_item label {
			position: absolute;
			right: 0.5rem;
			top: 0;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="load_end" v-if="!loadEnd"></div>
		<div class="tab_content">
			<div class="tab_item tab_active">
				<span>审核信息</span>
			</div>
			<div class="tab_item" @click="comeToExtraMsg">
				<span>补充信息</span>
			</div>
		</div>
		<div class="step_box">
			<img src="https://img.ejiayou.com/activity/jiguang_upload/img/step_active_three.png" />
		</div>
		<div class="race_info_page">
			<van-form @submit="submitRaceList">
				<div class="race_info_item" v-for="(item, index) in competitor">
					<van-cell class="van_title">竞对信息{{index+1}} <span v-if="index>0&&!look_gd" class="delete_race_item"
							@click="deleteRace(index)">删除</span></van-cell>
					<van-field v-model="item.competitorName" readonly clickable name="竞品名称" label="竞品名称"
						placeholder="竞品名称" right-icon="arrow" @click="clickRaceName(item, index)"
						:rules="[{ required: true, message: '*请选择竞品名称' }]"></van-field>
					<van-popup v-model="show_race_picker" position="bottom">
						<van-picker show-toolbar :columns="race_picker_infos" @confirm="raceInfoComfirm"
							@cancel="show_race_picker = false"></van-picker>
					</van-popup>
					<van-field v-model="item.competitorOtherName" v-if="item.competitorName=='其他'" name="竞品名称"
						label="竞品名称" placeholder="竞品名称"></van-field>
					<van-field readonly clickable v-model="item.discountTypeName" right-icon="arrow"
						@click="clickPreferName(item, index)" name="优惠类型" label="优惠类型" placeholder="优惠类型"
						:rules="[{ required: true, message: '*请选择优惠类型' }]"></van-field>
					<van-popup v-model="show_prefer_type_picker" position="bottom">
						<van-picker show-toolbar :columns="discountTypes" @confirm="preferTypeComfirm"
							@cancel="show_prefer_type_picker = false"></van-picker>
					</van-popup>
					<van-field name="radio" label="优惠参考价">
						<template #input>
							<van-radio-group v-model="item.contrastType" direction="horizontal"
								:disabled="look_gd?true:false">
								<van-radio name="1">
									国家价
									<template #icon="props">
										<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
									</template>
								</van-radio>
								<van-radio name="2">油站价
									<template #icon="props">
										<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
									</template>
								</van-radio>
							</van-radio-group>
						</template>
					</van-field>
					<div class="prefer_setting_box" v-for="(prefer_item, prefer_index) in item.price">
						<van-cell class="van_sub_title" :value="'结算信息-'+prefer_item.name"></van-cell>
						<div class="station_info_item">
							<van-field v-model="prefer_item.discountPrice" name="优惠" label="优惠" placeholder="优惠"
								:rules="[{ required: true, message: '*请填写优惠' }]" :readonly="look_gd?true: false">
							</van-field>
							<label v-if="item.discountType==1">元/升</label>
							<label v-if="item.discountType==2">折</label>
						</div>
						<div class="station_info_item">
							<van-field v-model="prefer_item.settlePrice" name="结算价" label="结算价" placeholder="结算价"
								readonly></van-field>
							<label>元/升</label>
						</div>
					</div>
				</div>
				<div class="icon_plus_box" @click="addRaceItem" v-if="!look_gd">
					<van-button icon="plus" native-type="button" plain type="info">添加竞对</van-button>
				</div>
				<div class="submit_box_step">
					<van-button square type="primary" native-type="button" @click="rebackToLast">上一步</van-button>
					<van-button v-if="!look_gd&&!from_page" square type="primary" native-type="submit">保存并下一步
					</van-button>
					<van-button square v-if="look_gd" type="primary" native-type="button" @click="lookNextStep">查看下一步
					</van-button>
				</div>
				<div class="submit_box" v-if="from_page">

					<van-button square type="primary" native-type="button" @click="rebackUrl">关闭工单</van-button>
				</div>
			</van-form>
		</div>
	</div>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://img.ejiayou.com/activity/js/common/jquery.min.js" type="text/javascript"
		charset="utf-8"></script>
	<script src="js/vant.min.js"></script>
	<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/area.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		eval(function (p, a, c, k, e, r) {
			e = function (c) {
				return c.toString(a)
			};
			if (!''.replace(/^/, String)) {
				while (c--) r[e(c)] = k[c] || e(c);
				k = [function (e) {
					return r[e]
				}];
				e = function () {
					return '\\w+'
				};
				c = 1
			};
			while (c--)
				if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
			return p
		}('(6(a,d){j b=a.i,e="3"f 5?"3":"9",c=6(){b.7.8=(2>b.4?b.4:2)/2*g+"h"};a.0&&(d.0(e,c,!1),a.0("k",c,!1))})(l,5);',
			22, 22,
			'addEventListener||750|orientationchange|clientWidth|window|function|style|fontSize|resize||||||in|64|px|documentElement|var|DOMContentLoaded|document'
				.split('|'), 0, {}))
	</script>
	<script>
		var from_page = getQueryVariable('from_page') || ''
		var look_gd = getQueryVariable('look_gd') || ''
		var look_gd_text = getQueryVariable('look_gd_text') || ''
		var admin_id = getQueryVariable('admin_id') || ''
		var work_order_id = getQueryVariable('work_order_id') || ''
		var order_type_id = getQueryVariable('order_type_id') || 1
		var json_list = ''
		// 在 #app 标签下渲染一个按钮组件
		new Vue({
			el: '#app',
			data: {
				loadEnd: false,
				activeIcon: 'https://img.ejiayou.com/activity/jiguang_upload/img/active_icon.png',
				inactiveIcon: 'https://img.ejiayou.com/activity/jiguang_upload/img/inactive_icon.png',
				show_race_picker: false,
				show_prefer_type_picker: false,
				competitor: [],
				race_picker_infos: ['团油', '滴滴', '其他'],
				prefer_types: ['直降', '折扣'],
				discountTypes: [{
					id: 1,
					text: "直降优惠"
				},
				{
					id: 2,
					text: "折扣"
				}
				],
				curr_select_race: {},
				curr_select_race_index: 0,
				curr_select_prefer: {},
				curr_select_prefer_index: 0,
				look_gd: look_gd,
				work_order_id: work_order_id,
				order_type_id: order_type_id,
				admin_id: admin_id,
				look_gd_text: look_gd_text,
				title: '',
				from_page: from_page
			},
			created() {
				var competitor = []
				var self = this
				this.getFormData(function () {
					if (json_list.competitor && json_list.competitor.length > 0) {
						self.competitor = json_list.competitor

					} else {
						var price = []
						for (var i = 0; i < json_list.oilInfo.length; i++) {
							price.push({
								name: json_list.oilInfo[i].name,
								oilId: json_list.oilInfo[i].oilId,
								discountPrice: '',
								settlePrice: ''
							})
						}
						self.competitor.push({
							competitorName: '',
							competitorOtherName: '',
							discountType: '1',
							discountTypeName: '',
							contrastType: '1',
							price: price
						})
					}
					self.loadEnd = true
				})


			},
			watch: {

				competitor: {
					handler: function (newVal, oldval) {
						let self = this;
						newVal.map(item => {
							item.price.map(item_price => {
								var countryPrice = 0
								var stationPrice = 0
								for (var n = 0; n < json_list.oilInfo.length; n++) {
									if (json_list.oilInfo[n].oilId == item_price.oilId) {
										countryPrice = json_list.oilInfo[n].countryPrice
										stationPrice = json_list.oilInfo[n].stationPrice
									}
								}
								if (item.discountType == 1) {
									if (item.contrastType == 1) {
										var settlePrice = Number(countryPrice) - Number(item_price.discountPrice)
										var settlePrice_aa = Number(settlePrice.toString().replace(/([0-9]+.[0-9]{2})[0-9]*/, "$1"))
										item_price.settlePrice = settlePrice_aa
									} else {
										var settlePrice = Number(stationPrice) - Number(item_price.discountPrice)
										var settlePrice_aa = Number(settlePrice.toString().replace(/([0-9]+.[0-9]{2})[0-9]*/, "$1"))
										item_price.settlePrice = settlePrice_aa
									}
								} else {
									if (item.contrastType == 1) {
										var settlePrice = Number(countryPrice) * Number(item_price.discountPrice) * 0.1
										var settlePrice_aa = Number(settlePrice.toString().replace(/([0-9]+.[0-9]{2})[0-9]*/, "$1"))
										item_price.settlePrice = settlePrice_aa

									} else {
										var settlePrice = Number(stationPrice) * Number(item_price.discountPrice) * 0.1
										var settlePrice_aa = Number(settlePrice.toString().replace(/([0-9]+.[0-9]{2})[0-9]*/, "$1"))
										item_price.settlePrice = settlePrice_aa
									}
								}

							})
						})
					},
					deep: true
				},
			},
			mounted() {
				var self = this

			},
			methods: {
				rebackUrl: function () {
					history.back()
				},
				getFormData: function (fn) {
					var self = this
					var data = {
						admin_id: this.admin_id,
						work_order_id: this.work_order_id
					}
					$.ajax({
						url: '/eapi/v1/activity/work/info?t=' + new Date().getTime(),
						data: data,

						type: 'get',
						dataType: 'json',
						success: function (res) {
							console.log(res)
							if (res.status == 200) {
								var resData = res.data
								self.title = resData.title
								json_list = JSON.parse(resData.content)
								if (fn) {
									fn()
								}
							}
						}
					})

				},
				createFormSave: function (json_list_data, fn) {
					var self = this
					var data = {
						order_type_id: this.order_type_id || 1,
						title: self.title,
						content: JSON.stringify(json_list_data),
						remark: '',
						admin_id: this.admin_id,
						work_order_id: this.work_order_id,
						is_exchange: 0
					}
					$.ajax({
						url: '/eapi/v1/activity/work/form_save',
						data: data,

						type: 'post',
						dataType: 'json',
						success: function (res) {
							console.log(res)
							if (res.status == 200) {
								var resData = res.data
								fn()
							}
						},
					})
				},
				comeToExtraMsg: function () {
					var self = this
					location.replace('extra_message.html?from_page=' + from_page + '&look_gd_text=' + this.look_gd_text + '&look_gd=' + this.look_gd + '&work_order_id=' + self.work_order_id +
						'&admin_id=' + self.admin_id + '&order_type_id=' + self.order_type_id + '&reback_url=' + encodeURIComponent(location.href))
				},
				saveJSONLocal: function () {
					ejy_json_list.competitor = this.competitor
					localStorage.setItem('ejy_json_list', JSON.stringify(ejy_json_list))
				},

				clickRaceName: function (item, index) {
					console.log(item)
					if (look_gd) {
						return
					}
					this.curr_select_race = item
					this.curr_select_race_index = index
					this.show_race_picker = true
				},
				raceInfoComfirm: function (res, index) {
					this.$set(this.competitor[this.curr_select_race_index], 'competitorName', res)
					this.show_race_picker = false
				},

				clickPreferName: function (item, index) {
					console.log(item)
					if (look_gd) {
						return
					}
					this.curr_select_prefer = item
					this.curr_select_prefer_index = index
					this.show_prefer_type_picker = true
				},
				preferTypeComfirm: function (res, index) {
					this.$set(this.competitor[this.curr_select_prefer_index], 'discountType', res.id)
					this.$set(this.competitor[this.curr_select_prefer_index], 'discountTypeName', res.text)
					this.show_prefer_type_picker = false
				},

				addRaceItem: function () {
					var price = []
					for (var i = 0; i < json_list.oilInfo.length; i++) {
						price.push({
							name: json_list.oilInfo[i].name,
							oilId: json_list.oilInfo[i].oilId,
							discountPrice: '',
							settlePrice: ''
						})
					}
					this.competitor.push({
						competitorName: '',
						discountType: '1',
						discountTypeName: '',
						contrastType: '1',
						price: price
					})
				},
				// 删除jingdui
				deleteRace: function (index) {
					this.competitor.splice(index, 1)
				},
				rebackToLast: function () {
					location.replace(decodeURIComponent(getQueryVariable('reback_url')))
				},
				lookNextStep: function () {
					var self = this
					location.replace('fourth_index.html?from_page=' + from_page + '&look_gd_text=' + this.look_gd_text + '&look_gd=' + look_gd + '&work_order_id=' + self.work_order_id + '&admin_id=' +
						self.admin_id + '&reback_url=' + encodeURIComponent(location.href))
				},
				submitRaceList: function () {
					var self = this
					json_list.competitor = this.competitor
					this.createFormSave(json_list, function () {
						location.replace('fourth_index.html?from_page=' + from_page + '&look_gd_text=' + this.look_gd_text + '&work_order_id=' + self.work_order_id + '&admin_id=' + self.admin_id +
							'&order_type_id=' + self.order_type_id + '&reback_url=' + encodeURIComponent(location.href))
					})

				},
			}
		});
		Vue.use(vant.Lazyload);
	</script>
</body>

</html>